<template>
	<view class="statistics tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<dr-custom-nav title="统计" bottomShadow="true"></dr-custom-nav>

		<view class="charts-box">
			<qiun-data-charts type="rose" :opts="opts" :chartData="chartData" :canvas2d="true" canvasId="LkYkvVYHcZRSzDXQXbRlCgsKRagliqWO" />
		</view>
		<view class="charts-box">
			<qiun-data-charts type="pie" :opts="opts1" :chartData="chartData" :canvas2d="true" canvasId="TDSQlUBqiOinDMVQDmgtZlvObeTuOehY" />
		</view>
	</view>
</template>

<script>
export default {
	name: "PageC",
	data() {
		return {
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['rose'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				legend: {
					show: true,
					position: "left",
					lineHeight: 25,
				},
				extra: {
					rose: {
						type: "area",
						minRadius: 50,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 2,
						borderColor: "#FFFFFF",
					},
				},
			},
			opts1: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: true,
						borderWidth: 3,
						borderColor: "#FFFFFF",
						linearType: "custom",
					},
				},
			},
		};
	},
	onReady() {
		this.getServerData();
	},
	methods: {
		getServerData() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					series: [
						{
							data: [
								{ name: "一班", value: 50 },
								{ name: "二班", value: 30 },
								{ name: "三班", value: 20 },
								{
									name: "四班",
									value: 18,
									labelText: "四班:18人",
								},
								{ name: "五班", value: 8 },
							],
						},
					],
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			}, 100);
		},
	},
};
</script>

<style lang="scss" scoped>
.statistics {
	height: 100%;
}

.charts-box {
	width: 100%;
	height: 300px;
}
</style>
